
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>前端基础作业</title>
 <link rel="stylesheet" href="{{ STATIC_URL }}open/css/style.css">
 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js">
 </script>
    <script>
        $(function(){
                const data = {
            "HuangShan": {
                "productId": 3,
                "name": "⻩⼭",
                "tabContentLst": [
                    {
                        "img": "https://dimg03.c-ctrip.com/images/10010p000000g1ipu47D7_C_500_280.jpg",
                        "prdNme": "⻩⼭+宏村4⽇3晚跟团游(4钻)·【经典热卖·⼝碑优选】20⼈⼩团·满2成⼈⽴减200『1晚夜宿1600⽶⻩⼭顶·缤纷秋⾊⼊画来·⽇出云海+ 2晚市区5钻·CBD商圈闹中取静·逛吃⽅便』不得不来的⼈⽓景点⻩⼭+宏村 & 含⻔票 + 往返景交 ",
                        "price": {
                            "amt": 1849
                        }
                    },
                    {
                        "img": "https://dimg04.c-ctrip.com/images/0303l120008qi8w679380_C_500_280.jpg",
                        "prdNme": "⻩⼭+宏村3⽇2晚跟团游(5钻)·【携程⾃营·诗画徽州】20⼈⼩团『AB线挂牌五星酒店 / CD线洲际旗下·皇冠假⽇酒店 & 赠皇冠⾃助晚餐』连住不挪窝 & 登⻩⼭览胜景 +⽔墨宏村 + 半天⾃由活动 & 赠⻩⼭往返景交 + 接送站 7 * 24H旅⾏客服",
                        "price": {
                            "amt": 1159
                        }
                    },
                    {
                        "img": "https://dimg04.c-ctrip.com/images/300l190000016fzdh0E19_C_500_280.jpg",
                        "prdNme": "⻩⼭3⽇2晚跟团游(4钻)·CEO推荐.2⼈减160 ⻩⼭赏秋『1晚⼭顶四星标间+2早3正餐 + 登⼭3宝 + 38元景交 + 24h免费接送』观⽇出云海.⽇落晚霞 导游带领登⼭.深度游⼤好河⼭| CD线2晚市区连住赠⽔墨宏村 | 专属私⼈管家 | 秋游热荐",
                        "price": {
                            "amt": 1196
                        }
                    },
                    {
                        "img": "https://dimg04.c-ctrip.com/images/300112000000ss9w496C6_C_500_280.jpg",
                        "prdNme": "安徽⻩⼭+宏村3⽇2晚跟团游(4钻)·⼈⽓产品·⽉销奇迹·20⼈⼩团『1晚⻩⼭⼭顶标间+ A线宿市区逛⽼街 / C线宿宏村奇墅湖赠阿菊演出』⽇出⽇落 /⻄海⼤峡⾕/⽔墨宏村 含景点⻔票+往返景交+ 免费接送站 + 1对1私⼈管家·100 % 纯玩",
                        "price": {
                            "amt": 1702
                        }
                    },
                    {
                        "img": "https://dimg04.c-ctrip.com/images/0302q120008xf07vw3E26_C_500_280.jpg",
                        "prdNme": "宏村+婺源3⽇2晚跟团游(5钻)·【携程⾃营·天凉好个秋】20⼈⼩团 漫步篁岭|晒秋⼈家·天街古巷 +⾏摄宏村 | 多彩秋⾊ 2晚连住市区五星酒店 &⾃由逛⽼街 +⻔票缆⻋全含 赠24H接送站 纯 玩 /⼀站式服务 / 轻松不累 爸妈放⼼游",
                        "price": {
                            "amt": 1189
                        }
                    },
                    {
                        "img": "https://dimg03.c-ctrip.com/images/fd/tg/g4/M09/B5/34/CggYHVZdCySAMYCNABVKJzG8yZg854_C_500_280.jpg",
                        "prdNme": "⻩⼭3⽇2晚跟团游(4钻)·秋游热点@2⼈⽴减88|⻓者享⽴减『1晚宿⼭顶+1晚⽼街5钻酒店 + 2早3正餐 +⻩⼭38元景交 + 赠登⼭3宝』宿1600⽶⼭顶观⽇出云海 | 暖⼼导游伴游登⼭|⼭顶标间或多⼈可选 | 宏村景点可选 | 纯玩安⼼游",
                        "price": {
                            "amt": 1459
                        }
                    },
                    {
                        "img": "https://dimg03.c-ctrip.com/images/100c0z000000nbvinF35C_C_500_280.jpg",
                        "prdNme": "⻩⼭+宏村4⽇⾃由⾏(4钻)·【1晚⻩⼭市区+1晚⻩⼭⼭顶+1晚宏村内】看“⽜形村落”-宏村 · 南湖春晓，⽉沼⻛荷，双溪映碧 | ⼊住⼭顶1晚 · 坐看⽇出⽇落 · 峰峦如幻 · 奇⽯林⽴『⾼铁往返 』",
                        "price": {
                            "amt": 1147
                        }
                    },
                    {
                        "img": "https://dimg04.c-ctrip.com/images/300j14000000x3hz0C4AC_C_500_280.jpg",
                        "prdNme": "⻩⼭⻛景区3⽇2晚跟团游(4钻)·【携程⾃营·多彩⻩⼭】2成⼈⽴减100元 20⼈⼩团 AB线·1晚市区5钻酒店+1晚⻩⼭⼭顶标间·观⽇出云海『后⼭上·前⼭下·不⾛回头路&⾏程更轻松』|CD线·2晚连住市区酒店【⻩⼭⼀地·推荐线路】",
                        "price": {
                            "amt": 1129
                        }
                    }
                ]
            },
            "ShangHai": {
                "productId": 2,
                "name": "上海",
                "tabContentLst": [
                    {
                        "img": "https://dimg04.c-ctrip.com/images/03025120008vokgk294A5_C_500_280.png",
                        "prdNme": "露营·|上海美帆精致露营2⽇过夜体验| 【Glamping套装租赁】美学⽣活/⾃助搭建，含精致帐篷+天幕+桌椅，⼀应俱全+24⼩时热⽔淋浴，多项⽬玩乐可选，体验淀⼭湖畔⾃然⽣活",
                        "price": {
                            "amt": 428
                        }
                    },
                    {
                        "img": "https://dimg04.c-ctrip.com/images/300v0x000000liuks9C9C_C_500_280.jpg",
                        "prdNme": "上海2⽇1晚⾃由⾏(4钻)·【亲⼦游&萌娃的爱】住海昌海洋公园度假酒店1晚+上海海昌海洋公园⻔票2张·跨⽇⽆限次⼊园！畅游2⽇玩到爽！海豚 企鹅 美⼈⻥|和海洋⽣物亲密接触！",
                        "price": {
                            "amt": 640
                        }
                    },
                    {
                        "img": "https://dimg03.c-ctrip.com/images/fd/tg/g2/M07/8B/4D/Cghzf1Ww4EKAIJf0AA-a5kIApP4409_C_500_280.jpg",
                        "prdNme": "华东5市+乌镇6⽇5晚跟团游(4钻)·赏秋品蟹+升2晚5钻+4正餐50餐标+含灵⼭⻔票&升级梵宫⾃助【⾃营⼒荐·枕⽔华东】⼉童含早「精华全含」乌镇+周庄双⽔乡 ⻄湖游船+赠送周庄电瓶⻋【真纯玩⽆购物】",
                        "price": {
                            "amt": 1149
                        }
                    },
                    {
                        "img": "https://dimg04.c-ctrip.com/images/0301m120008jvszyl7522_C_500_280.jpg",
                        "prdNme": "上海+苏州+杭州+乌镇5⽇4晚跟团游(5钻)·古镇枫叶&杭城桂⾬&⾦秋品蟹·全程5 钻&1晚乌镇·汉服体验『⾃营精品·纯玩打卡』宿乌镇内/外可选【明星漫游·步⼊江南百景】宋城⾃选 20%空座率『餐标50 ⽔乡宴&桃源餐&⻰井品茶』",
                        "price": {
                            "amt": 949
                        }
                    },
                    {
                        "img": "https://dimg04.c-ctrip.com/images/0302a120008s16afjB861_C_500_280.png",
                        "prdNme": "上海+苏州+杭州+乌镇4⽇3晚跟团游(5钻)·2成⼈⽴减200『⻄塘抖⾳⼤赛赢好礼！赠⻄溪摇橹船·夜宿乌镇5钻客栈·登⾼赏上海夜景+深度⻄湖+⻄栅提灯⾛桥+世遗留园·餐标50⽔乡宴&⻰井茶宴』赠⻄湖⼿绘地图⼀⻋到底不拼团",
                        "price": {
                            "amt": 699
                        }
                    },
                    {
                        "img": "https://dimg03.c-ctrip.com/images/100d0u000000iuw5z6A17_C_500_280.jpg",
                        "prdNme": "上海2-10⽇⾃由⾏·【超级⾃由⾏】出游天数⾃定义 · ⽀持双酒店体验 · 酒店星级随⼼选 · ⾏程⾃由搭配 · ⼀站式满⾜出游需求【外滩/南京路/迪⼠尼度假区/淮海路/静安寺 摩登上海 等你开启】『不含⼤交通』",
                        "price": {
                            "amt": 262
                        }
                    },
                    {
                        "img": "https://dimg03.c-ctrip.com/images/100a0t000000ipwplA539_C_500_280.jpg",
                        "prdNme": "上海迪⼠尼（Disney）+杭州+苏州+乌镇5⽇4晚跟团游(5钻)·可选迪⼠尼Vip礼 宾 ⾦秋纯玩『+1元购80餐劵』三5A·世遗留园+⽹红乌镇⽇与夜+深度⻄湖·南北全景+外滩专属服务中⼼【夜宿乌镇】三宴·⾼餐标50元",
                        "price": {
                            "amt": 1599
                        }
                    },
                    {
                        "img": "https://dimg04.c-ctrip.com/images/300m0a0000004nrr2249A_C_500_280.jpg",
                        "prdNme": "上海+苏州+杭州+⽆锡+南京+乌镇6⽇5晚跟团游(4钻)·纯玩⼩团【升2晚5钻宿乌镇+⽹红拈花湾客栈+赠汉服游园】2进⻄栅+拈花湾深度游『登雷峰塔+⻜来峰寻宝』4正餐50餐标&景区⾃助+⼉童含早 赠禅夜秀 ⾏程轻松 赠24H接机 ",
                        "price": {
                            "amt": 992
                        }
                    }
                ]
            },
            "HangZhou": {
                "productId": 3,
                "name": "杭州",
                "tabContentLst": [
                    {
                        "img": "https://dimg04.c-ctrip.com/images/0302e120008jvszir91BF_C_500_280.jpg",
                        "prdNme": "苏州+乌镇+杭州3⽇2晚跟团游(5钻)·戏剧节！古镇枫叶&杭城桂⾬&⾦秋品蟹·全程5钻+1晚乌镇·汉服体验『⾃营精品』宿乌镇内/外可选【明星漫游·江南百景】20%空座率『三顿餐标50 ⽔乡宴&桃源餐&⻰井品茶』",
                        "price": {
                            "amt": 549
                        }
                    },
                    {
                        "img": "https://dimg04.c-ctrip.com/images/0303u120006swk805EF4A_C_500_280.jpg",
                        "prdNme": "苏州+乌镇+杭州3⽇2晚跟团游(5钻)·明星万⼈纯玩『全程5钻+夜宿乌镇 深度⻄湖·南北全景』三5A景⼁世遗·留园+⽹红乌镇⽇夜景+全景⻄湖⼁甄选全明星阵容 专⻋专导【三宴50⾼餐标】苏宴+乌镇⽔乡宴+乾隆御茶宴",
                        "price": {
                            "amt": 543
                        }
                    },
                    {
                        "img": "https://dimg03.c-ctrip.com/images/fd/tg/g2/M07/8B/4D/Cghzf1Ww4EKAIJf0AA-a5kIApP4409_C_500_280.jpg",
                        "prdNme": "华东5市+乌镇6⽇5晚跟团游(4钻)·赏秋品蟹+升2晚5钻+4正餐50餐标+含灵⼭⻔票&升级梵宫⾃助【⾃营⼒荐·枕⽔华东】⼉童含早「精华全含」乌镇+周庄双⽔乡 ⻄湖游船+赠送周庄电瓶⻋【真纯玩⽆购物】",
                        "price": {
                            "amt": 1149
                        }
                    },
                    {
                        "img": "https://dimg04.c-ctrip.com/images/300l12000000rva7m3963_C_500_280.jpg",
                        "prdNme": "苏州+乌镇+杭州3⽇2晚跟团游(4钻)·【苏州5钻+乌镇4/5钻酒店】⼀天⼀城+纯玩 乌镇⽇/夜景+5A园林+寒⼭寺+船游⻄湖/可选宋城千古情 B/C线宿5钻乌镇外/内酒店，可多次⼊园+免费电⻋+泳池 含2早可选杭州御茶宴 ",
                        "price": {
                            "amt": 499
                        }
                    },
                    {
                        "img": "https://dimg04.c-ctrip.com/images/300k0q000000gj411B3E4_C_500_280.jpg",
                        "prdNme": "杭州+乌镇+⻄塘3⽇2晚跟团游(5钻)·错峰赏秋『夜宿乌镇5钻+升级杭州挂牌5星&⽹红乌镇玩1整天』5钻⾃助早&50御茶宴【经典5A3⽔乡 乌镇+南浔+⻄塘】赠200元⾃费双游船 ⻔票超450元 【B线下午出发 D线含宋城】纯玩优选",
                        "price": {
                            "amt": 498
                        }
                    },
                    {
                        "img": "https://dimg04.c-ctrip.com/images/0301m120008jvszyl7522_C_500_280.jpg",
                        "prdNme": "上海+苏州+杭州+乌镇5⽇4晚跟团游(5钻)·古镇枫叶&杭城桂⾬&⾦秋品蟹·全程5 钻&1晚乌镇·汉服体验『⾃营精品·纯玩打卡』宿乌镇内/外可选【明星漫游·步⼊江南百景】宋城⾃选 20%空座率『餐标50 ⽔乡宴&桃源餐&⻰井品茶』",
                        "price": {
                            "amt": 949
                        }
                    },
                    {
                        "img": "https://dimg04.c-ctrip.com/images/300g0s000000hzkxa432D_C_500_280.jpg",
                        "prdNme": "乌镇+杭州2⽇1晚跟团游·赏⻄栅⽇夜全景 纯玩⽆购物【⼀整天360打卡⽹红乌镇】拒绝⾛⻢观花+【泛⾈⻄湖赏美景】+A线住乌镇⾃营5钻客栈+多次⼊园+赠晚餐，可升级C线⼊住乌镇⻄栅景区内5钻酒店",
                        "price": {
                            "amt": 399
                        }
                    },
                    {
                        "img": "https://dimg04.c-ctrip.com/images/0302a120008s16afjB861_C_500_280.png",
                        "prdNme": "上海+苏州+杭州+乌镇4⽇3晚跟团游(5钻)·2成⼈⽴减200『⻄塘抖⾳⼤赛赢好礼！赠⻄溪摇橹船·夜宿乌镇5钻客栈·登⾼赏上海夜景+深度⻄湖+⻄栅提灯⾛桥+世遗留园·餐标50⽔乡宴&⻰井茶宴』赠⻄湖⼿绘地图⼀⻋到底不拼团",
                        "price": {
                            "amt": 699
                        }
                    }
                ]
            }
        }

        let productLi = ''
        const setProductLi = () => {

            Object.keys(data).forEach(key => {
                productLi += `<li product-name="${key}">${data[key].name}</li>`
            })

            $('.product-nav').html(productLi)
            productLi = ''
        }
        setProductLi()

        const setProductContent = (data) => {
            return `
                    <div class="product-item">
                        <a href="${data.img}" target="_blank">
                            <div class="product-item-thumbnail">
                                <img src="${data.img}" alt="">
                             </div>
                        </a>
                        <p class="product-item-name">
                            ${data.prdNme}
                        </p>
                        <p class="product-item-info">
                            <span class="price"><dfn>¥</dfn>${data.price.amt}<i class="price_info">起</i></span>
                        </p>
                    </div>
                `
        }
        let productContent = ''

        const updateHtml = (name = 'HuangShan') => {
            const currentData = data[name]
            currentData['tabContentLst'].forEach(tab => {
                productContent += setProductContent(tab)
            })

            $(`li[product-name=${name}]`).addClass('active')
            $('.produce-content').html(productContent)
            productContent = ''
        }
        updateHtml()

        $('.product-nav').click(function (e) {
            if (e.target.nodeName !== 'LI') {
                return
            }
            const currentLi = $(e.target)
            currentLi.addClass('active').siblings().removeClass('active')
            const name = currentLi.attr('product-name')
            updateHtml(name)
        })
        });
    </script>
</head>
<body>
    <div class="main">
         <div class="banner-wrap">
             <div class="rtx-top">
             <div class="rtx-top-banner">
             <h1 class="title">fiona</h1>
             </div>
         </div>
     </div>
     <div class="content">
        <div class="panel">
             <div class="panel-left">
                 <dl class="keyword-list">
                 <dt>热⻔主题游</dt>
                 <dd>
                 <span class="entrance-item"><a href="https://www.baidu.com/" target="_blank">海 岛</a></span>
                 </dd>
                 <dd>
                 <span class="entrance-item"><a href="https://www.baidu.com/" target="_blank">古 镇</a></span>
                 </dd>
                 <dd>
                 <span class="entrance-item"><a href="https://www.baidu.com/" target="_blank">蜜 ⽉</a></span>
                 </dd>
                 <dd>
                 <span class="entrance-item"><a href="https://www.baidu.com/" target="_blank">亲 ⼦</a></span>
                 </dd>
                 <dd>
                 <span class="entrance-item"><a href="https://www.baidu.com/" target="_blank">美 ⻝</a></span>
                 </dd>
                 <dt>热⻔目的地</dt>
                    <dd>
                        <span class="entrance-item"><a href="https://www.baidu.com/" target="_blank">黄山</a></span>
                    </dd>
                    <dd>
                        <span class="entrance-item"><a href="https://www.baidu.com/" target="_blank">上海</a></span>
                    </dd>
                    <dd>
                        <span class="entrance-item"><a href="https://www.baidu.com/" target="_blank">杭州</a></span>
                    </dd>
                 </dl>
             </div>
             <div class="panel-right">
                <ul class="product-nav">
                        <!-- 动态导航 js动态插⼊-->
                    </ul>
                    <div class="produce-content">
                        <!-- 动态内容 js动态插⼊-->
                    </div>
             </div>
         </div>
     </div>
 </div>
</body>
</html>